<template>
  <div class='detail-body' ref="print_order">
    <p class="title">订单信息</p>
    <div class="info">
      <p v-for="(item, index) in modelData0" :key="index" :class="item.class + ' mb10'">
        <span>{{item.label}}：</span>
        <span :class="item.class1||'color-999'">{{baseInfo[item.prop]}}</span>
        <span class="ml10 color-999">{{item.unit}}</span>
      </p>
    </div>

    <p class="title">{{getTitle}}</p>
    <div class="shop-info">
      <div class="logo">{{getTitle}}：<img :src="baseInfo.merchantPic||imgs.c_logo" alt=""><span>{{baseInfo.merchantName}}</span> <el-button type="success" class="ml20 quick-video no-print" v-if="path!='/center/seller/myorder/orderManage/detail'">查看实时监控</el-button></div>

      <div class="shop-goods">
        <span>订单内容：</span>
        <div class="table-box">

          <!-- 使用ele的表格打印有点问题 -->
          <table>
            <tr>
              <th>品名</th>
              <th>商品名称</th>
              <th>材质</th>
              <th>特性</th>
              <th>数量/单位</th>
              <th>地区</th>
            </tr>
            <tr v-for="(item, index) in tableData" :key="index">
              <td>{{item.categoryName}}</td>
              <td>{{item.productName}}</td>
              <td>{{item.materials}}</td>
              <td>{{item.features}}</td>
              <td>{{item.quantity}}/{{item.unit}}</td>
              <td>{{item.area}}</td>
            </tr>
            <tr v-if="tableData ==undefined || tableData.length==0"><td colspan="6">暂无</td></tr>
          </table>
        </div>
      </div>

      <div class="remark mb10">
        <span>备注：</span>
        <p>{{baseInfo.remark}}</p>
      </div>
    </div>

    <p v-if="courierInfo.type==='QSH' || baseInfo.logistics==='QSH'" class="title mb10">收货人</p>
    <div v-if="courierInfo.type==='QSH' || baseInfo.logistics==='QSH'" class="info">
      <p v-for="(item, index) in modelData1" :key="index" :class="item.class + ' mb10'">
        <span>{{item.label}}：</span>
        <span :class="item.class1||'color-999'">{{courierInfo.receiver[item.prop]}}</span>
      </p>
    </div>
    <p class="title">{{courierInfo.type==="QSH"?"发货结果":"物流信息"}}</p>
    <div class="logistics-info">
      <Logistics v-if="courierInfo.type!=='QSH'||true" :courierInfo="courierInfo" />
      <img v-else :src="courierInfo.img" alt="">
    </div>

    {{getData}}
  </div>
</template>
<script>
import Logistics from './logistics.vue'
import Mixins from '@/mix/mix.js'
export default {
  props:['printStart','data'],
  components: {Logistics},
  name: "",
  data() {
    return {
      imgs:{
        c_logo:require('@/assets/imgs/center/c_logo.png'),
      },

      modelData0:[
        {prop:"orderNo",label:"订单编号"},
        {prop:"status",label:"订单状态"},
        {prop:"paymentTime",label:"付款时间"},
        {prop:"sendTime",label:"发货时间"},
        {prop:"invoice",label:"发票"},
        {prop:"price",label:"商品报价"},
        {prop:"freight",label:"运费"},
        {prop:"taxPoint",label:"税点"},
        {prop:"taxation",label:"税费"},
        {prop:"allmoney",label:"总价",class:"money-count",class1:"color-red",unit:"元"},
      ],

      modelData1:[
        {prop:"name",label:"收货人"},
        {prop:"address",label:"收货地址"},
        {prop:"phone",label:"联系方式"},
      ],

      baseInfo:{},//订单信息
      tableData:[],
      courierInfo:{
        img:"",
        type:"",
        Traces:[],
        receiver:{}
      },//物流信息

      title:"",
    };
  },
  computed:{
    getTitle(){
      let title = this.path =="/center/seller/myorder/orderManage/detail"?"买家信息":"商家信息"
      return title
    },

    getData(){
      this.baseInfo={...this.data.info}
      this.baseInfo.status=new Array(6).fill('').map((val,index)=>{return ["待付款","待发货","已发货","已完成","已发货","已取消","已关闭"][Math.floor(index)]})[this.baseInfo.status || this.baseInfo.orderStatus]
      this.baseInfo.price = this.baseInfo.price || this.baseInfo.allPrice
      this.baseInfo.freight = this.baseInfo.freight || this.baseInfo.postage
      this.$set(this.courierInfo.receiver,'name',this.baseInfo.pickName)
      this.$set(this.courierInfo.receiver,'address',this.baseInfo.pickAddress)
      this.$set(this.courierInfo.receiver,'phone',this.baseInfo.buyUserName)
      if(this.baseInfo.logistics ==="QSH"){
          this.courierInfo.img=this.data.result
          this.$set(this.courierInfo,'type',this.baseInfo.logistics)
          this.$set(this.courierInfo.receiver,'img',this.baseInfo.merchantPic)
      }else{
          this.$set(this.courierInfo,'ShipperCode',this.baseInfo.logistics)
          this.$set(this.courierInfo,'LogisticCode',this.baseInfo.logisticsNum)
          this.$set(this.courierInfo.receiver,'shipperName',this.baseInfo.sendName)
          this.$set(this.courierInfo.receiver,'shipperAddress',this.baseInfo.sendAddress)
          if(this.baseInfo.logistics!=="QSH"&&this.data.result){
              this.$set(this.courierInfo,'Traces',JSON.parse(this.data.result).Traces)
          }
      }
      // 0-已取消-10-未付款，20-已付款，40-已发货，50-交易成功，60-交易关闭
      this.baseInfo.invoice=this.baseInfo.invoice>0?"有":"无"
      this.baseInfo.allmoney=(Number(this.baseInfo.price)+Number(this.baseInfo.freight)+Number(this.baseInfo.taxation))||0
      this.title=this.baseInfo.realName||"名称"
      this.$set(this,'tableData',this.data.data)
      if(this.data.receiver){
          if(this.data.receiver.logistics!=="QSH"&&this.data.result){
              this.courierInfo=JSON.parse(this.data.result)
          }
          this.courierInfo.receiver=this.data.receiver
          this.courierInfo.type=this.data.receiver.logistics
          if(this.data.receiver.logistics==="QSH"){
              this.courierInfo.img=this.data.result
          }
      }
    }
  },
  watch:{
    printStart(){
      if(this.printStart)this.doPrint()
    }
  },
  methods: {
    doPrint(){
      this.$print(this.$refs.print_order)
    },
  },
  mixins:[Mixins]
};
</script>
<style lang="scss" scoped>
.detail-body {
  padding: 15px;

  .title{
    border-left: 2px solid $blue;
    text-indent: 10px;
    line-height: 35px;
    margin-bottom: 5px;
  }
  .info{
    padding-left: 12px;
    font-size: 14px;
    p{
      line-height: 35px;

      span:nth-child(1){
        display: inline-block;
        min-width: 70px;
        text-align: right;
      }
    }
    .money-count{
      font-size: 20px;
      margin: 20px 0;
    }
  }
  .shop-info{
    padding-left: 12px;
    font-size: 14px;

    .logo{
      line-height: 36px;
      margin-bottom: 10px;
      img{
        width: 36px;
        height: 36px;
        margin-right: 10px;
      }
      span{
        color: $blue;
        line-height: 36px;
        font-size: 18px;
      }
      .quick-video{
        margin-left: 20px;
        padding: 0 30px;
        border-radius: 30px;
      }
    }
    >div{
      display: flex;

      >p{
        flex: 1;
        overflow-wrap: break-word;
        font-size: 13px;
        color: #666;
      }
    }
    .table-box{
      flex: 1;
      // width: 945px; //有点意思
      margin-bottom: 10px;
      max-width: 900px;

      table{
        width: 100%;
        border-right: 1px solid #ddd;
        border-top: 1px solid #ddd;

        tr{
          display: flex;
          th,td{
            width: 0;
            color: #666;
            flex: 1;
            border: 1px solid #ddd;
            border-top: none;
            border-right: none;
            padding: 10px;
            text-align: center;
            font-size: 14px;
          }
        }
      }
    }
    .remark{
      span{
        display: inline-block;
        width: 70px;
      }
    }
  }

  .logistics-info{
    padding-left: 12px;
    img{
      width: 200px;
      min-height: 100px;
      margin: 10px 0;
    }
  }
}
</style>